<!doctype html>
<html>
<head>
    <title>Demo &raquo; Serialize &raquo; gridster.js</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <link rel="stylesheet" type="text/css" href="/scripts/gridster.js/jquery.gridster.min.css">
    <script src="/scripts/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/scripts/gridster.js/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
 
    <style type="text/css">
        #log {
            display: block;
            width: 100%;
            height: 20px;
            margin-bottom: 20px;

            -webkit-transition: height 0.3s ease;
            -moz-transition: height 0.3s ease;
            -ms-transition: height 0.3s ease;
            -o-transition: height 0.3s ease;
            transition: height 0.3s ease;
        }

        #log:focus {
            height: 100px;
        }
    </style>
</head>

<body>

<h1>Serialize positions</h1>

<p>Use <code>serialize</code> method to get widget positions. It returns a Array of objects that can be used as a JSON object.</p>

<div class="controls">
    <button class="js-seralize">Serialize</button>
</div>

<textarea id="log"></textarea>

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
        <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>

        <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
        <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>

        <li data-row="5" data-col="1" data-sizex="1" data-sizey="2">10</li>
        <li data-row="4" data-col="3" data-sizex="1" data-sizey="2">11</li>
        <li data-row="5" data-col="4" data-sizex="1" data-sizey="1">12</li>
        <li data-row="6" data-col="2" data-sizex="3" data-sizey="1">13</li>

        <li data-row="4" data-col="5" data-sizex="1" data-sizey="2">14</li>
        <li data-row="6" data-col="5" data-sizex="1" data-sizey="1">15</li>

        <li data-row="7" data-col="3" data-sizex="1" data-sizey="1">16</li>
    </ul>
</div>

<script type="text/javascript">
    var gridster;

    $(function () {

        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 55],
            widget_margins: [5, 5]
        }).data('gridster');


        $('.js-seralize').on('click', function () {
            var s = gridster.serialize();

            $('#log').val(JSON.stringify(s));
        })

    });
</script>
</body>
</html>
